<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>油卡管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
</head>
<body class="layui-layout-body">
<blockquote class="layui-elem-quote"  >
                <div class=" layui-form" >
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select name="searchKind"  lay-filter="searchKind" lay-search id="searchKind">
                                <option value="">请选搜索类型</option>
                                <option value="jyz">加油站</option>
                                <option value="ykh">油卡号</option>
                                <option value="yklb">油卡类别</option>
                            </select>
                        </div>


                        <div class="layui-input-inline">
                            <div class="layui-input-inline"  >
                                <select    lay-filter="searchContentSelect" lay-search id="searchContentSelect">
                                </select>
                            </div>
                        </div>
                        <!--<label class="layui-form-label" >余额范围</label>-->

                            <!--<div class="layui-input-inline" style="width: 150px">-->
                                <!--<input class="layui-input" id="yefwl">-->
                            <!--</div>-->

                        <!--<div class="layui-input-inline" style="width: 20px;">至</div>-->

                            <!--<div class="layui-input-inline" style="width: 150px" >-->
                                <!--<input class="layui-input" id="yefwr">-->
                            <!--</div>-->

                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-normal" id="search">点击搜索</button>
                            <button class="layui-btn layui-btn-normal" id="all"   >显示全部</button>
                        </div>



                        <div class="layui-input-inline " style=" width:10%; position: absolute;right: 0 ">
                            <button type="button" class="layui-btn layui-btn-normal" id="new">新增油卡</button>

                        </div>



                    </div>
                </div>

</blockquote>
        <div class="layui-row">
            <div class="layui-col-xs12">
                <script type="text/html" id="opera">


                    {{#  if( getQueryVariable("R") == "false"){ }}
                    <button class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled" disabled  lay-event="detail">查看</button>
                    <button class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled"   lay-event="recharge">充值</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled"   lay-event="del">删除</button>
                    {{# }else{ }}

                    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail" >查看</button>
                    {{#  if( getQueryVariable("ADD") == "false"){ }}
                    <button class="layui-btn layui-btn-normal layui-btn-xs layui-btn-disabled" lay-event="recharge" disabled>充值</button>
                    {{# }else{ }}
                    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="recharge" >充值</button>
                    {{# } }}
                    {{#  if( getQueryVariable("D") == "false"){ }}
                    <button class="layui-btn layui-btn-danger layui-btn-xs  layui-btn-disabled" disabled  lay-event="del">删除</button>
                    {{# }else{ }}
                    <button class="layui-btn layui-btn-danger layui-btn-xs  "   lay-event="del">删除</button>
                    {{# } }}


                    {{# } }}

                </script>
                <table id="table" lay-filter="Table" ></table>
                <script id="dqye" type="text/html">
                    {{# if(d.dqye < 500){ }}
                        <div style="background: yellow">{{d.dqye}}</div>
                    {{# }else{ }}
                            {{d.dqye}}
                    {{# } }}
                </script>
            </div>
        </div>

<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['form' ,'table','element'], function(){
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var tableheight= 'full-200';
        var tablewidth = 75;
        var currentPage = 1;
        //校验
        judgments($,["yefwl","yefwr"],/^([1-9]\d*|0)(\.\d{1,2})?$/,"请输入整数或小数");

        //获取url参数 渲染 权限控制的页面
        if(getQueryVariable("C") == "false"){
            $("#new").attr("disabled",true) ;
            $("#new").addClass("layui-btn-disabled");
        }

        // 搜索 select 渲染
        form.on('select(searchKind)',function (data) {
            console.log(data);
            switch (data.value){

                case "jyz":
                    $("#searchContentSelect").empty();

                    var option1 = "<option value='中石油'>中石油</option>";
                    var option2 = "<option value='中石化'>中石化</option>";
                    var option3 = "<option value='其他'>其他</option>";

                    $("#searchContentSelect").append("<option value=''>请选择</option>");
                    $("#searchContentSelect").append(option1);
                    $("#searchContentSelect").append(option2);

                    $("#searchContentSelect").append(option3);
                    form.render('select');
                    break;
                case "ykh":
                    $("#searchContentSelect").empty();
                    $.ajax({
                        url: contextPath+"/oilcard",
                        type: "GET",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            $("#searchContentSelect").append("<option value=''>请选择</option>");
                            for(var i in res.list){
                                var option = "<option value='"+ res.list[i].ykh+ "'>"+res.list[i].ykh+"</option>";
                                $("#searchContentSelect").append(option);
                            };
                            form.render('select');
                        }
                    });
                    break;
                case "yklb":
                    $("#searchContentSelect").empty();

                    var option1 = "<option value='备用卡'>备用卡</option>";
                    var option2 = "<option value='固定卡'>固定卡</option>";


                    $("#searchContentSelect").append("<option value=''>请选择</option>");
                    $("#searchContentSelect").append(option1);
                    $("#searchContentSelect").append(option2);


                    form.render('select');
                    break;

                default:
            }
        });
//新增

        $("#new").on("click",function () {
            layer.open({
                cancel: function(index, layero){
                    var faIndex = index;
                    layer.confirm('确定要关闭么?未保存的信息将会丢失!', {icon: 3, title:'提示'}, function(index){
                        //do something
                        layer.close(index);
                        layer.close(faIndex);
                    });
                    return false
                },
                type: 2,
                title: '新增油卡',
                maxmin: true,
                //点击遮罩关闭层
                area : ['80%' , '55%'],
                content: ['./newOilCard.html','no'],

                end:function(){
                    $.ajax({
                        url: contextPath+"/oilcard",
                        type: "GET",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {

                            table.render({
                                elem: '#table'
                                ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                                ,data:res.list
                                ,page: {
                                    curr: 1 //重新从第 1 页开始
                                    ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                                ,limit:10
                                ,cellMinWidth: tablewidth
                                ,cols: [[ //表头
                                    { type:'numbers', title: '序号',  align:'center'  }
                                    ,{field: 'ykh', title: '油卡号' ,align:'center'}
                                    ,{field: 'jyz', title: '加油站' ,align:'center'}
                                    ,{field: 'gkrq', title: '购卡日期' ,  align:'center'}
                                    ,{field: 'yklb', title: '油卡类别' ,  align:'center'}
//                                    ,{templet: '#dqye', title: '当前余额' ,align:'center'}
//                                    ,{field: 'ljcyje', title: '累计充油金额' ,align:'center'}
//                                    ,{field: 'ljllcyje', title: '累计理论充油金额' ,align:'center'}
                                    ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera'}
                                ]]
                            });
                        }

                    });
                }
            });

        });
//刷新列表
        $("#all").on('click',function () {
            url = contextPath+"/oilcard";
            $.ajax({
                url:url,
                type: "GET",
                contentType:"application/json;charset=utf-8",
                dataType:"json",
                success: function(res) {

                    table.render({
                        elem: '#table'
                        ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                        ,data:res.list
                        ,page: {
                                    curr: 1 //重新从第 1 页开始
                            ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                        ,limit:10
                        ,cellMinWidth: tablewidth
                        ,cols: [[ //表头
                            { type:'numbers', title: '序号',  align:'center'  }
                            ,{field: 'ykh', title: '油卡号' ,align:'center'}
                            ,{field: 'jyz', title: '加油站' ,align:'center'}
                            ,{field: 'gkrq', title: '购卡日期' ,  align:'center'}
                            ,{field: 'yklb', title: '油卡类别' ,  align:'center'}
//                            ,{templet: '#dqye', title: '当前余额' ,align:'center'}
//                            ,{field: 'ljcyje', title: '累计充油金额' ,align:'center'}
//                            ,{field: 'ljllcyje', title: '累计理论充油金额' ,align:'center'}
                            ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera'}
                        ]]
                    });
                }

            });

        });
        var url =contextPath+"/oilcard?"+$("#searchKind").val() +'='+$("#searchContentSelect").val()+"&yefwl="+$("#yefwl").val()+"&yefwy="+$("#yefwr").val();
// 搜索
        $("#search").on('click',function () {
// //            if($("#yefwr").val() == "" && $("#yefwl").val() == ""){
//             if(0){
//                 var url =  contextPath+"/oilcard?"+'keyname='+ $("#searchKind").val() +'&keyvalue='+$("#searchContentSelect").val() ;
// //            }else if($("#yefwr").val() == "" || $("#yefwl").val() == ""){
// //                layer.msg("余额范围填写错误");
// //                return;
//             }else {
                 url =  contextPath+"/oilcard?"+$("#searchKind").val() +'='+$("#searchContentSelect").val()+"&yefwl="+$("#yefwl").val()+"&yefwy="+$("#yefwr").val();
            // }

            console.log(url);
            $.ajax({
                url: url,
                type: "GET",
                contentType:"application/json;charset=utf-8",
                dataType:"json",
                success: function(res) {

                    table.render({
                        elem: '#table'
                        ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                        ,data:res.list
                        ,page: {
                                    curr: 1 //重新从第 1 页开始
                            ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                        ,limit:10
                        ,cellMinWidth: tablewidth
                        ,cols: [[ //表头
                            { type:'numbers', title: '序号',  align:'center'  }
                            ,{field: 'ykh', title: '油卡号' ,align:'center'}
                            ,{field: 'jyz', title: '加油站' ,align:'center'}
                            ,{field: 'gkrq', title: '购卡日期' ,  align:'center'}
                            ,{field: 'yklb', title: '油卡类别' ,  align:'center'}
//                            ,{templet: '#dqye', title: '当前余额' ,align:'center'}
//                            ,{field: 'ljcyje', title: '累计充油金额' ,align:'center'}
//                            ,{field: 'ljllcyje', title: '累计理论充油金额' ,align:'center'}
                            ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera'}
                        ]]
                    });
                }

            });

        });


        //table实例

        $.ajax({
            url: url,
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {

                table.render({
                    elem: '#table'
                    ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                    ,data:res.list
                    ,page: {
                                    curr: currentPage //重新从第 1 页开始
                        ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                    ,limit:10
                    ,cellMinWidth: 1
                    ,cols: [[ //表头
                        { type:'numbers', title: '序号',  align:'center'  }
                        ,{field: 'ykh', title: '油卡号' ,align:'center'}
                        ,{field: 'jyz', title: '加油站' ,align:'center'}
                        ,{field: 'gkrq', title: '购卡日期' ,  align:'center'}
                        ,{field: 'yklb', title: '油卡类别' ,  align:'center'}
//                        ,{templet: '#dqye', title: '当前余额' ,align:'center'}
//                        ,{field: 'ljcyje', title: '累计充油金额' ,align:'center'}
//                        ,{field: 'ljllcyje', title: '累计理论充油金额' ,align:'center'}
                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera'}

                    ]]
                    ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currentPage = curr;
                    }
                });
            }

        });


        //监听工具条
        table.on('tool(Table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.open({
                    cancel: function(index, layero){
                        var body = layer.getChildFrame('body',index);
                        var faIndex = index;
                        console.log(layero);
                        if(!(body.contents().find("#modiSub").hasClass("layui-btn-disabled"))){

                            layer.confirm('确定要关闭么?未保存的信息将会丢失!', {icon: 3, title:'提示'}, function(index){
                                //do something
                                layer.close(index);
                                layer.close(faIndex);
                            });
                        }else {
                            layer.close(faIndex);
                        }

                        return false
                    },
                    type: 2,
                    title: '油卡管理',
                    maxmin: true,
                    shadeClose: false, //点击遮罩关闭层
                    area : ['80%' , '25%'],
                    content: './lookOilCard.html',
                    success:function(layero,index){

                        var body = layer.getChildFrame('body',index);
                        data.isU = getQueryVariable("U");
                        for(var i in data){
                            body.contents().find("[name='"+i+"']").val(eval("data."+i));
                        }
                    },
                    end:function(){
                        $.ajax({
                            url: url,
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem: '#table'
                                    ,height:tableheight
                                    ,data:res.list
                                    ,page: {
                                    curr: currentPage //重新从第 1 页开始
                                        ,layout:['prev', 'page', 'next','skip','count']
                                } //开启分页
                                    ,limit:10
                                    ,cellMinWidth: tablewidth
                                    ,cols: [[ //表头
                                        { type:'numbers', title: '序号',  align:'center'  }
                                        ,{field: 'ykh', title: '油卡号' ,align:'center'}
                                        ,{field: 'jyz', title: '加油站' ,align:'center'}
                                        ,{field: 'gkrq', title: '购卡日期' ,  align:'center'}
                                        ,{field: 'yklb', title: '油卡类别' ,  align:'center'}
//                                        ,{templet: '#dqye', title: '当前余额' ,align:'center'}
//                                        ,{field: 'ljcyje', title: '累计充油金额' ,align:'center'}
//                                        ,{field: 'ljllcyje', title: '累计理论充油金额' ,align:'center'}
                                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera'}
                                    ]]
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        console.log(curr);
                                        currentPage = curr;
                                    }
                                });
                            }

                        });
                    }
                });
            }
             else if(layEvent === 'del'){
            layer.confirm('确定删除？', function(index){
                obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令
                $.ajax({
                    url: contextPath+"/oilcard/"+data.ykid,
                    type: "DELETE",
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    success: function(res) {
                        layer.msg(res.message);
                        $.ajax({
                            url: url,
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem: '#table'
                                    ,height:tableheight
                                    ,data:res.list
                                    ,page: {
                                        curr: currentPage //重新从第 1 页开始
                                        ,layout:['prev', 'page', 'next','skip','count']
                                    } //开启分页
                                    ,limit:10
                                    ,cellMinWidth: tablewidth
                                    ,cols: [[ //表头
                                        { type:'numbers', title: '序号',  align:'center'  }
                                        ,{field: 'ykh', title: '油卡号' ,align:'center'}
                                        ,{field: 'jyz', title: '加油站' ,align:'center'}
                                        ,{field: 'gkrq', title: '购卡日期' ,  align:'center'}
                                        ,{field: 'yklb', title: '油卡类别' ,  align:'center'}
//                                        ,{templet: '#dqye', title: '当前余额' ,align:'center'}
//                                        ,{field: 'ljcyje', title: '累计充油金额' ,align:'center'}
//                                        ,{field: 'ljllcyje', title: '累计理论充油金额' ,align:'center'}
                                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera'}
                                    ]]
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        console.log(curr);
                                        currentPage = curr;
                                    }
                                });
                            }

                        });
                    }
                });
            });
        }else  if(layEvent === 'recharge'){
                layer.open({
                    cancel: function(index, layero){
                        var body = layer.getChildFrame('body',index);
                        var faIndex = index;
                        console.log(layero);
                        if(!(body.contents().find("#modiSub").hasClass("layui-btn-disabled"))){

                            layer.confirm('确定要关闭么?未保存的信息将会丢失!', {icon: 3, title:'提示'}, function(index){
                                //do something
                                layer.close(index);
                                layer.close(faIndex);
                            });
                        }else {
                            layer.close(faIndex);
                        }

                        return false
                    },
                    type: 2,
                    title: '充值',
                    maxmin: true,
                    shadeClose: false, //点击遮罩关闭层
                    area : ['1400px' , '800px'],
                    content: './recharge.html',
                    success:function(layero,index){
                        console.log(data);
                        var body = layer.getChildFrame('body',index);

                        for(var i in data){
                            body.contents().find("[name='"+i+"']").val(eval("data."+i));
                        }
                    },
                    end:function(){
                        $.ajax({
                            url: url,
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem: '#table'
                                    ,height:tableheight
                                    ,data:res.list
                                    ,page: {
                                        curr: currentPage //重新从第 1 页开始
                                        ,layout:['prev', 'page', 'next','skip','count']
                                    } //开启分页
                                    ,limit:10
                                    ,cellMinWidth: tablewidth
                                    ,cols: [[ //表头
                                        { type:'numbers', title: '序号',  align:'center'  }
                                        ,{field: 'ykh', title: '油卡号' ,align:'center'}
                                        ,{field: 'jyz', title: '加油站' ,align:'center'}
                                        ,{field: 'gkrq', title: '购卡日期' ,  align:'center'}
                                        ,{field: 'yklb', title: '油卡类别' ,  align:'center'}
//                                        ,{templet: '#dqye', title: '当前余额' ,align:'center'}
//                                        ,{field: 'ljcyje', title: '累计充油金额' ,align:'center'}
//                                        ,{field: 'ljllcyje', title: '累计理论充油金额' ,align:'center'}
                                        ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera'}
                                    ]]
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        console.log(curr);
                                        currentPage = curr;
                                    }
                                });
                            }


                        });
                    }
                });
            }
        });


    });





</script>
</body>
</html>